<template>
  <div>
    <section class="bg-blue-500 text-white py-16">
      <div class="container mx-auto px-4 text-center">
        <h2 class="text-4xl font-bold mb-4">
          Unlock $300 OFF your first order with meviy!
        </h2>
        <p class="text-xl mb-8">
          Your Trusted Source for Industrial Automation and Controls
        </p>
        <button
          class="bg-white text-blue-500 px-6 py-3 rounded hover:bg-blue-100"
        >
          View More
        </button>
      </div>
    </section>
    <section class="py-12">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold mb-8 text-center">Manufacturer</h2>
        <div class="grid grid-cols-1 md:grid-cols-6 gap-8">
          <div v-for="item in brands" :id="item.MFGID" class="bg-white p-4 rounded shadow">
            <p class="mt-2 mb-2 font-bold">{{ item.MfgName }}</p>
            <img
              :src="item.MfgIconPath"
              :alt="item.MfgName"
              class="w-full"
            />
          </div>
        </div>
      </div>
    </section>
    <section class="py-12 bg-gray-200">
      <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl font-bold mb-8 text-center">Order Process</h2>
        <div class="flex justify-center space-x-16">
          <div class="flex flex-col items-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-12 w-12 text-blue-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
              />
            </svg>
            <p class="mt-2">1.Discuss requirements</p>
          </div>
          <div class="flex flex-col items-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-12 w-12 text-blue-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
              />
            </svg>
            <p class="mt-2">2.Selection of suppliers</p>
          </div>
          <div class="flex flex-col items-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-12 w-12 text-blue-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100-4 2 2 0 000 4zm-8 2.133A2.9 2.9 0 005 18c0 1.657 1.343 3 3 3h6a3 3 0 001.748-.352M4.486 18.486l-.63-.63-.63.63"
              />
            </svg>
            <p class="mt-2">3.Payment and delivery</p>
          </div>
        </div>
        <!-- <button
          @click="handleInquiry"
          class="mt-8 bg-blue-500 text-white px-6 py-3 rounded hover:bg-blue-600"
        >
          Inquiry now
        </button> -->
      </div>
    </section>
    <section class="py-12">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold mb-8 text-center">About us</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div>
            <p>
              AUGTO takes pride in its extensive network of partnerships with
              renowned brands and suppliers, which enables the company to
              provide high-quality products. We are an expert electronic
              component distributor. We're not only committed to becoming a
              leading enterprise in the B2B trading of electronic components but
              also hope to become an essential force in the development of the
              industry.
            </p>
            <p>
              By continuously improving its quality management system, AUGTO
              ensures strict adherence to industry standards and customer
              requirements. The company has obtained ISO 14001, ISO 9001, and
              Dun & Bradstreet certifications, highlighting its commitment to
              delivering the highest quality products and services.
            </p>
          </div>
          <div>
            <img
              src="https://admin.scriptecho.cn/api/chat/aiRandomImg/random?w=400&h=300&query=office building"
              alt="About Us"
              class="w-full"
            />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref, computed, onMounted } from 'vue'
import { useNuxtApp } from '#app'
const { $request } = useNuxtApp() // 获取 Axios 实例
import { useRouter,useRoute } from 'vue-router'
const router = useRouter()

interface Brand {
  MFGID: string
  MfgName: string
  StandMfgName: string
  MfgIconPath: string
  ProductNumber: string
}

const brands = ref<Brand[]>([]) // 用于存储品牌列表
// 使用 asyncData 方法获取品牌列表
const fetchBrands = async () => {
  try {
    const response = await $request.post('/api/v1/mfg/AllManufacturers',{
      "PopularLimit": 0
    }) // 通过代理请求
    brands.value = response.Data // 假设返回的数据是品牌列表
  } catch (error) {
    console.error('Error fetching brands:', error)
  }
}

const handleInquiry = () => {
  console.log('Inquiry now')
  router.push('/rfq') // 跳转到询价页面

}
onMounted(() => {
  fetchBrands()
})
</script>

<style lang="scss" scoped>

</style>